<template>
<div>
<el-card shadow="none">
 <el-col :xs="0" :sm="16" :md="16" :lg="16" :xl="16">
     <el-col :xs="8" :sm="6" :md="4" :lg="3"    :xl="1"
     >
      <img src="./../../assets/image/indexlogo.png" alt />
   </el-col>
   
   </el-col>
 
    <el-col :xs="6" :sm="6" :md="2" :lg="2" :xl="2" class="containerx">
      <div >
     <div >
        <p>关于</p>
          <!-- <img src="./../../assets/logo.png"> -->
     </div>
    

   </div>
   </el-col>
   <el-col :xs="6" :sm="6" :md="2" :lg="2" :xl="2" class="containerx">
      <div >
     <div >
        <p>视频</p>
          <!-- <img src="./../../assets/logo.png"> -->
     </div>
    

   </div>
   </el-col>
    <el-col :xs="6" :sm="6" :md="2" :lg="2" :xl="2" class="containerx">
      <div >
     <div >
        <p>执照</p>
          <!-- <img src="./../../assets/logo.png"> -->
     </div>
    

   </div>
   </el-col>
    <el-col :xs="6" :sm="6" :md="2" :lg="2" :xl="2" class="containerx">
      <div v-if="usertoken===null ">
<div class="box" @click="logout">
     <div class="con">
        <p style="color:#38BFD4">登录</p>
          <!-- <img src="./../../assets/logo.png"> -->
     </div>
   </div>
        
      </div>
       <div v-if="usertoken!=null">
<div class="box" @click="login">
     <div class="con">
        <p style="color:#38BFD4">进入</p>
          <!-- <img src="./../../assets/logo.png"> -->
     </div>
   </div>
        
      </div>
   </el-col>
</el-card>



</div>
</template>
<script>
export default {
  data(){
return{
usertoken:'',

}

  },
  methods:{
  getlogin(){
    const tokenStr=window.sessionStorage.getItem('token')
    this.usertoken=tokenStr;
  }
  ,
  logout() {
      window.sessionStorage.clear();
      this.$router.push("/login");
    },
login(){
   this.$router.push("/home")
}

  }
  ,created(){
this.getlogin();

  }
}
</script>
<style lang="less" scoped>

.el-card{
height: 100%;
border-radius: 15px;
background-color: #efeeee;

}
img{
  height:47px ;
  width: 381px;
  position: relative;
  
}

.containerx .box{
  display: flex;
  justify-content: space-around;
  flex-direction:column;
  align-items: center;
  align-content: center;


}
.containerx .box .con{
  width: 60px;
height: 40px;
box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.1),
-18px -18px 30px rgba(255, 255, 255, 1);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
background-color: #efeeee;
transition: box-shadow .5s ease-out;
position: relative;
}
.con .box .con{
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1),0px 0px 30px rgba(255, 255, 255, 1),
inset 18px 18px 30px rgba(0, 0, 0, 0.1),
inset -18px -18px 30px rgba(255, 255, 255, 1);
;

transition: box-shadow .5s ease-out;

}
.containerx .box p{
color: slategray;

}
.containerx .box .con:hover{
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1),0px 0px 30px rgba(255, 255, 255, 1),
inset 18px 18px 30px rgba(0, 0, 0, 0.1),
inset -18px -18px 30px rgba(255, 255, 255, 1);
;

transition: box-shadow .5s ease-out;
}

</style>